<script>
// 新增组件向导
import DataSheet from '../../material/datasheet/DataSheet';
import WorkSpaceQuery from '../../../mixins/WorkspaceQuery';

const DATA_SHEET_TYPE = '92101,92102,92103,92200,92300';

import SheetLoader from '../../../utils/sheet-loader';

export default {
  name: 'GuideNewCard',
  components: {
    DataSheet,
  },
  mixins: [WorkSpaceQuery],
  props: {
    isGetDataSheet: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      leftCenterSpan: 24 /* 左边容器所占比 */,
      rightCenterSpan: 0 /* 右边容器所占比 */,
      xField: '' /* X轴字段 */,
      fieldList: [] /* 字段列表 */,
      yField: [] /* Y轴字段 */,
      data: [] /* 添加的数据 */,
      dataSource: false /* 数据源对话框 */,
      selectedAppType: 'basicChart' /* 选中的应用类型 */,
      selectedAppChildType: 'textItem' /*选中的应用子分类*/,
      eleOption: {} /*  元素信息*/,
      elementType: 'Histogram' /*  选中元素类型*/,
      textContent: '' /* 文本内容*/,
      dataSheetList: [],
      cardTypes: [
        //卡片类型
        { name: 'basicChart', text: '图表', catalogNeeded: true, dataNeeded: true },
        { name: 'mapItem', text: '地图', catalogNeeded: false, dataNeeded: false },
        { name: 'formItem', text: '表单', catalogNeeded: true, dataNeeded: true },
        {
          name: 'resourceItem',
          text: '资源',
          children: [
            { name: 'textItem', text: '文本', catalogNeeded: false, dataNeeded: false },
            { name: 'imgItem', text: '图片', catalogNeeded: false, dataNeeded: false },
            { name: 'frameItem', text: '网页链接', catalogNeeded: false, dataNeeded: false },
          ],
        },
        { name: 'externalApp', text: '外部应用', catalogNeeded: true, dataNeeded: false },
        { name: 'customItem', text: '自定义', catalogNeeded: false, dataNeeded: false },
      ],
    };
  },
  computed: {
    //子分类
    childTypes() {
      let typeItem = this.cardTypes.find(p => p.name == this.selectedAppType);
      return typeItem.children || [];
    },
    //选择的图表分类
    selectedChartType() {
      let typeItem = this.cardTypes.find(p => p.name == this.selectedAppType);
      if (typeItem.children) {
        return typeItem.children.find(p => p.name == this.selectedAppChildType);
      }
      return typeItem;
    },
  },
  watch: {
    async isGetDataSheet(newVal) {
      if (newVal) {
        const dataSheet = await this.getAllAppList({ typeId: DATA_SHEET_TYPE });
        this.dataSheetList = dataSheet.data;
      }
    },
    selectedChartType(newVal) {
      this.selectType(newVal.name);
    },
    childTypes(newVal) {
      if (newVal.length > 0) {
        this.selectedAppChildType = newVal[0].name;
      }
    },
  },
  methods: {
    /* 选中类型，根据选中类型判断自定义组件图表是否显示 */
    selectType(appType) {
      if (this.appType === 'custom') {
        this.leftCenterSpan = 16;
        this.rightCenterSpan = 8;
      } else {
        this.leftCenterSpan = 24;
        this.rightCenterSpan = 0;
      }

      const type = {
        async basicChart() {
          const dataSheet = await this.getAllAppList({ typeId: DATA_SHEET_TYPE });
          this.dataSheetList = dataSheet.data;
        },
        mapItem() {},
        formItem() {},
        textItem() {},
        imgItem() {},
        frameItem() {},
        async externalApp() {
          const getMapList = await this.getAppList(
            {
              typeId: '40001',
            },
            1,
            100
          );
          this.dataSheetList = getMapList.data.dataSource;
        },
        customItem() {},
      };

      type[appType].call(this);
    },
    /* 取消对话框 */
    selectTypeCancel() {
      this.$emit('closeGuide', false);
    },
    //校验数据
    validateData() {
      if (this.selectedChartType.catalogNeeded && !this.resId) {
        this.$Message.warning('请选择数据表!');
        return false;
      }
      return true;
    },
    /* 创建一个新的应用，这个时候新组件没有类型 */
    async addType() {
      //校验表单
      if (!this.validateData()) return;
      // 查询数据表
      if (this.selectedChartType.dataNeeded) {
        this.sheetLoader = new SheetLoader(this.resId);
        const response = await this.sheetLoader.getData();
        this.selectedData(response);
        this.addElement();
      } else {
        this.addElement();
      }
    },
    /* 增加自定义文本 */
    addText() {
      this.eleOption = {
        xField: this.xField,
        yField: this.yField,
        eleType: 'text',
        data: this.textContent,
        resId: this.resId,
      };
      this.$emit('addNewElement', this.eleOption);
    },
    /* 增加不同类型的组件 */
    addElement() {
      const element = {
        basicChart() {
          if (this.data[0] && this.data[0].length > 0) {
            this.eleOption = {
              xField: this.xField,
              yField: this.yField,
              eleType: this.selectedChartType.name,
              data: this.data[0],
              resId: this.resId,
            };
            this.$emit('closeGuide', false);
            this.$emit('addNewElement', this.eleOption);
          } else {
            this.$Message.info({
              content: '请选择数据',
              duration: 10,
              closable: true,
            });
          }
        },
        mapItem() {
          this.eleOption = {
            eleType: this.selectedChartType.name,
            resId: this.resId,
          };
          this.$emit('addNewElement', this.eleOption);
          this.$emit('closeGuide', false);
        },
        textItem() {
          this.eleOption = {
            eleType: this.selectedChartType.name,
            resId: this.resId,
          };
          this.$emit('addNewElement', this.eleOption);
          this.$emit('closeGuide', false);
        },
        imgItem() {
          this.eleOption = {
            eleType: this.selectedChartType.name,
            resId: this.resId,
          };
          this.$emit('addNewElement', this.eleOption);
          this.$emit('closeGuide', false);
        },
        frameItem() {
          this.eleOption = {
            eleType: this.selectedChartType.name,
            resId: this.resId,
          };
          this.$emit('addNewElement', this.eleOption);
          this.$emit('closeGuide', false);
        },
        formItem() {
          this.eleOption = {
            eleType: this.selectedChartType.name,
            data: this.data[0],
            resId: this.resId,
          };
          this.$emit('closeGuide', false);
          this.$emit('addNewElement', this.eleOption);
        },
        externalApp() {
          this.eleOption = {
            eleType: this.selectedChartType.name,
            resId: this.resId,
          };
          this.$emit('addNewElement', this.eleOption);
          this.$emit('closeGuide', false);
        },
        customItem() {},
      };
      element[this.selectedChartType.name].call(this);
    },
    /* 选中一个数据 */
    selectedData(e) {
      this.data = [];
      this.yField = [];
      this.data.push(e);
      if (this.data[0] && this.data[0].length) {
        this.fieldList = [];
        for (let k of this.data[0]) {
          this.fieldList.push({ value: k, label: k });
        }
      }
    },
    // 选择数据源
    selectDataSheet(sheet) {
      this.resId = sheet;
    },
  },
};
</script>
<template>
  <div class="guide">
    <h3>新增图表</h3>
    <Row class="datav-content">
      <Col :span="leftCenterSpan">
      <Row class="guide-row">
        <p>选择图表类型：</p>
        <RadioGroup
          v-model="selectedAppType"
          type="button">
          <Radio
            v-for="item in cardTypes"
            :key="item.name"
            :label="item.name">
            {{ item.text }}
          </Radio>
        </RadioGroup>
      </Row>
      <Row v-if="childTypes.length>0">
        <p>选择子类型：</p>
        <RadioGroup
          v-model="selectedAppChildType"
          type="button">
          <Radio
            v-for="item in childTypes"
            :key="item.name"
            :label="item.name">
            {{ item.text }}
          </Radio>
        </RadioGroup>
      </Row>
      <Row v-if="selectedChartType.catalogNeeded">
        <p>选择数据表：</p>
        <DataList
          :dataList="dataSheetList"
          @on-selectList="selectDataSheet"></DataList>
      </Row>
      </Col>
      <Col
        v-if="selectedChartType.name ==='customItem'"
        :span="rightCenterSpan"
      >
      <div>
        <p>图表</p>
        <Row>
          <Col span="12">
          <Card class="card-item">
            <Button>
              <Icon
                type="plus"
                size="20"></Icon>
            </Button>
          </Card>
          </Col>
          <Col span="12">
          <Card class="card-item">
            <Button>
              <Icon
                type="plus"
                size="20"></Icon>
            </Button>
          </Card>
          </Col>
        </Row>
      </div>
      </Col>
    </Row>
    <Row class="datav-footer">
      <Button @click="selectTypeCancel">取消</Button>
      <Button
        type="primary"
        @click="addType">确定</Button>
    </Row>
  </div>
</template>


<style lang="less" scoped>
.guide {
  > .k-row:first-child {
    padding: 10px;
  }

  .datav-content {
    padding: 10px 15px;

    p {
      margin: 10px 0;
    }
  }

  .datav-footer {
    text-align: right;
    margin-top: 10px;
    padding: 0 12px;
  }

  h3 {
    text-align: left;
  }
  div {
    font-size: 12px;
    line-height: 1.5;
  }

  .k-layout.k-layout-has-sider {
    height: 100%;
    background-color: #ddd;
    .k-layout-content {
      border-top: 1px solid #000;
      margin-top: 10px;
    }
  }
}

.vertical-center {
  height: 400px;
}

.k-layout.k-layout-has-sider /deep/.k-layout-sider-children {
  background: #fff;
  border: 1px solid #ddd;
  height: calc(~'40vh');
  overflow-y: scroll;
}

.card {
  width: 30%;
  height: 30%;
  margin: 3px;
  display: inline-block;
  cursor: pointer;
}

.k-btn:focus {
  background-color: #2d8cf0;
  color: #fff;
}

.card-item h4 {
  margin: 6px 0 0 0;
  color: dodgerblue;
}

.card:focus {
  box-shadow: 0 0 2px 0 rgba(45, 140, 240, 0.2);
}

.k-modal-footer {
  border: 0;
}

.k-modal-body {
  height: 200px;
}

.guide-row {
}
</style>
